<template>
	<a-modal width="auto" v-model:visible="formVisible" :align-center="true" @cancel="handleCancel" :footer="false"
		:mask-closable="false">
		<template #title>
			收货人信息
		</template>
		<a-menu mode="horizontal" :default-selected-keys="status"
			style="width:auto;background-color:var(--color-bg);transform: translate(0%,-50%);" :accordion="true">
			<a-menu-item key="1" v-if="status[0] == '1'">新增收货信息</a-menu-item>
			<a-menu-item key="0" v-else-if="status[0] == '0'">修改收货信息</a-menu-item>
		</a-menu>
		<a-form ref="myAddressForm" size="medium" :model="addressForm" @submit-success="handleSuccess"
			style="width:calc(30vw);height:auto;padding-left: 5%;" autocomplete="on">
			<a-space direction="vertical" :size="15">
				<a-form-item class="itemStyle" field="name" label="姓&nbsp;&nbsp;&nbsp;名" :show-colon="true" :rules="[{required:true,message:'姓名为必填项'}]"
					:validate-trigger="['change','input']">
					<a-input v-model="addressForm.name" placeholder="请输入姓名..." :max-length="10" show-word-limit
						style="width:calc(80%);">
						<template #prefix>
							<icon-user />
						</template>
					</a-input>
				</a-form-item>
				<a-form-item class="itemStyle" field="telePhone" label="电&nbsp;&nbsp;&nbsp;话" :show-colon="true" :rules="[{required:true,message:'电话为必填项'},{minLength:11,message:'电话必须为11位'},
				{match:/^1[3|5|7|8]\d{9}$/,message:'请输入正确的电话号码格式'}]"
					:validate-trigger="['change','input']">
					<a-input v-model="addressForm.telePhone" placeholder="请输入电话..." style="width:calc(80%);"
						:max-length="11" show-word-limit>
						<template #prefix>
							<icon-phone />
						</template>
					</a-input>
				</a-form-item>
				<a-form-item class="itemStyle" field="address" label="地&nbsp;&nbsp;&nbsp;址" :show-colon="true" :rules="[{required:true,message:'地址为必填项'}]"
					:validate-trigger="['change','input']">
					<a-textarea placeholder="请输入联系地址" v-model="addressForm.address" :max-length="50" 
					allow-clear show-word-limit :auto-size="{
					    minRows:1,
					    maxRows:5
					  }" style="width: calc(80%);"/>
				</a-form-item>
				<a-space direction="vertical" style="margin-left: 11%;" :size="15">
					<a-row :span="11">
						<a-button type="primary" class="buttonStyle" html-type="submit" @submit="handleSuccess"
						v-if="status[0] == '1'">添加信息</a-button>
						<a-button type="primary" class="buttonStyle" html-type="submit" @submit="handleSuccess"
						v-else-if="status[0] == '0'">修改信息</a-button>
					</a-row>
					<a-row :span="11">
						<a-button class="buttonStyle" @click="resetAll()">重置</a-button>
					</a-row>
				</a-space>
			</a-space>
		</a-form>
	</a-modal>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		onMounted,
		watch,
		nextTick,
		toRefs
	} from 'vue';

	import apiUrl from '@/constant/index/apiUrl.js';
	import indexApi from '@/module/orderDetail/api/index.js';

	let {
		proxy
	} = getCurrentInstance();

	const props = defineProps({
		formVisible: Boolean,
		addressForm: Object,
		uId: String,
		status: Array,
		currentAddress: Object
	});

	const emit = defineEmits();

	const apiUrlHome =
		import.meta.env.VITE_API_URL_HOME;

	let myAddressForm = ref(null);
	let insertAddressStatus = reactive({});
	let updateAddressStatus = reactive({});
	let item = {};

	function handleCancel() {
		emit('getaddressFormVisible', !props.formVisible);
		myAddressForm.value.resetFields();
	}

	async function handleSuccess(values) {
		console.log('formData', values);
		//新增操作
		if(props.status[0] == 1){
			insertAddressStatus.data = await indexApi.insertAddressInfo(props.uId,values);
			console.log('form',insertAddressStatus.data);
			if(insertAddressStatus.data.flag){
				proxy.$message.success('新增成功');
				emit('refurshAddressList',true);
				//隐藏登录表单，并清除状态和填写过得字段
				emit('getaddressFormVisible', !props.formVisible);
				resetAll();
			}
		}
		//修改操作
		else if(props.status[0] == 0){
			console.log('222',item.addressId.value);
			updateAddressStatus.data = await indexApi.updateAddressInfo(item.addressId.value,values);
			console.log('form',updateAddressStatus.data);
			if(updateAddressStatus.data.flag){
				proxy.$message.success('修改成功');
				emit('refurshAddressList',true);
				//隐藏登录表单，并清除状态和填写过得字段
				emit('getaddressFormVisible', !props.formVisible);
				resetAll();
			}
		}
		document.querySelector("body").setAttribute("style", "overflow: auto !important;");
	}

	function resetAll() {
		myAddressForm.value.resetFields();
		myAddressForm.value.clearValidate();
	}

	function handleBeforeOk(done) {
		window.setTimeout(() => {
			done()
		}, 3000)
	}
	
	watch(props.currentAddress,(NewValue,PreValue)=>{
		console.log('NewValue',NewValue.data[0]);
		item = toRefs(NewValue.data[0]);
		myAddressForm.value.setFields(item);
	});

	onMounted(() => {
	});
</script>

<style lang="less" scoped>
	@import '@/assets/orderDetail/css/addressForm.less';
</style>
